/*
 * @Author: 非幡动 438484791@qq.com
 * @Date: 2024-06-27 18:40:30
 * @LastEditors: 非幡动 438484791@qq.com
 * @LastEditTime: 2024-07-18 20:11:05
 * @FilePath: \react-cornerstone-3d\src\views\StackImages-wado.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
/*
 * @Author: 非幡动 438484791@qq.com
 * @Date: 2024-06-27 18:40:30
 * @LastEditors: 非幡动 438484791@qq.com
 * @LastEditTime: 2024-07-18 19:50:48
 * @FilePath: \react-cornerstone-3d\src\views\StackImages-wado.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import {useEffect} from "react";
import {Enums, init as csRenderInit, RenderingEngine, imageLoader, metaData} from "@cornerstonejs/core";
import initCornerstoneDICOMImageLoader from '../utils/initCornerstoneDICOMImageLoaderT.js';
import initDemo from '../utils/initDemo.js';
import axios from "axios";
import registerWebImageLoader from "../utils/registerWebImageLoader.js";
import hardcodedMetaDataProvider from '../utils/hardcodedMetaDataProvider.js';

const {ViewportType} = Enums;

const renderingEngineId = 'myRenderingEngine';
const viewportId = 'CT_STACK';

const windowWidth = 400;
const windowCenter = 40;

const lower = windowCenter - windowWidth / 2.0;
const upper = windowCenter + windowWidth / 2.0;

const ctVoiRange = {lower, upper};

/**
 * wodo uri的方式
 */
function StackImages() {

    let viewport;

    useEffect(() => {
        const content = document.getElementById('content');
        if (!content.children || (content.children.length === 0)) {
            setup();
        }
    }, [])

    const setup = async () => {
        const content = document.getElementById('content');
        const element = document.createElement('div');
        element.id = 'cornerstone-element';
        element.style.width = '50%';
        element.style.height = '100%';
        content.appendChild(element);

        initCornerstoneDICOMImageLoader();
        // await csRenderInit({
        //     gpuTier: {
        //         tier: 0
        //     }
        // });
        await initDemo();
        metaData.addProvider(
            // @ts-ignore
            (type, imageId) => hardcodedMetaDataProvider(type, imageId, imageIds),
            10000
          );

        const renderingEngine = new RenderingEngine(renderingEngineId);

        const viewportInput = {
            viewportId,
            type: ViewportType.STACK,
            element
        };

        renderingEngine.enableElement(viewportInput);

        viewport = (
            renderingEngine.getViewport(viewportId)
        );
        const imageIds = [`web:/server/wado?requestType=WADO&studyUID=1.2.840.113619.186.808617090127.20210303084422103.763&seriesUID=1.3.12.2.1107.5.1.4.74466.30000021030207060846400168313&objectUID=1.3.12.2.1107.5.1.4.74466.30000021030207060846400168644&contentType=application/dicom`];
        const stack = [`web:/server/wado?requestType=WADO&studyUID=1.2.840.113619.186.808617090127.20210303084422103.763&seriesUID=1.3.12.2.1107.5.1.4.74466.30000021030207060846400168313&objectUID=1.3.12.2.1107.5.1.4.74466.30000021030207060846400168644&contentType=application/dicom`];
        await viewport.setStack(stack);
        viewport.setProperties({voiRange: ctVoiRange});
        viewport.render();
    }

    const getInfo = () => {
    }

    const drawPoint = () => {
        const context = viewport.canvas.getContext('2d');
        context.fillStyle = 'rgba(203,195,145,0.5)';
        context.fillRect(0, 0, 10, 10)
    }

    return (
        <div style={{width: '100%', height: '400px'}}>
            <div>
                <button onClick={getInfo}>get info</button>
                <button onClick={drawPoint}>draw</button>
            </div>
            <div id="content" style={{width: '100%', height: '100%'}}/>
        </div>

    );
}

export default StackImages;
